import Vue from 'vue'
import Vuex from 'vuex'
import user from "./modules/user"
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex) // 使用vuex 插件 use 方法是vue 专门用来挂载 是适用与vue 的插件的方法

export default new Vuex.Store({
  plugins:[
    // 数据持久化插件
    createPersistedState({
      storage:window.localStorage, // 将数据缓存在 localStorage
      key:"abcvuex", // 缓存的名字
      reducer(v){
        return{
          test:v.test
        }
        // 只缓存return 里面有的 不写这个方法 默认缓存所有
      }
    })
  ],
  state: { // 用来存放数据/变量
    test:"我是vuex",
    title:"1111",
    demo:"2222"
  },
  getters: { // vuex 的计算属性
    myTest(state){
      let a = state.test[0];
      for (let i = 0;i<state.test.length - 1;i++){
        a += "*"
      }
      return a;
    }
  },
  mutations: { // 这里用来定义方法（必须是同步的）并且规定只能通过这里修改state
    SET_TEST(state,data){
      // state 其实就是上面那个state 可以通过这个形参去修改或者获取state中的值
      console.log(data);
      console.log(state);
      state.test = data; // 修改test
    }
  },
  actions: { // 这里用来定义方法（可以定义异步方法）
    // 不要在actions 中去修改state 官方建议
    // 建议 actions ==> mutations ==>state
    timeTest({commit},data){
      // context 是个对象 里面有很多方法
      // data 指的是传递过来的参数
      // 3秒之后再去修改 cost
      // console.log(context);
      console.log(data)

      setTimeout(() =>{
        commit("SET_TEST","data")
      },3000)
    }
  },
  modules: { // 这里用来挂载模块
    user
    // 先定义模块组件
    // 然后在index 引入
    // 然后在modules 声明模块
  }
})
